<!--若需要一个基本类型的响应式数据，必须使用ref-->
<!--若需要一个响应式对象，层级不深，ref，reactive都可以-->
<!--若需要一个响应式对象，且层级较深，推荐使用reactive-->
<script lang="ts" name="person-new" setup>
//reactive 只能定义对象类型数据
//ref 能定义基础数据类型,也能定义对象类型数据
//表面上是用的ref 底层是用reactive定义的对象
import {reactive, ref} from "vue";

//数据
let car = reactive({
  brand: '奔驰',
  price: 100
})
let sum = ref(0)
//方法
function changePrice() {
  car.price += 10
}
function changeSum () {
  // sum.value += 1
}
function changeBrand () {
  car.brand= '宝马'
}
function changeCar () {
  //这样写页面不会更新在reactive中
  // car = {
  //   brand: '雅迪',
  //   price: 100
  // }
  //这样写 在ref中 是可以更新的
  // car.value = { brand: '奥拓', price: 200}

  //这样写法可以更新
  Object.assign(car.value, { brand: '雅迪',price: 100})
}
</script>

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <button @click="changeBrand">修改汽车的品牌</button>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我 sum + 1</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 15px;
}

li {
  font-size: 20px;
}
</style>